<template>
  <header>
    <span class="iconfont header__icon" @click="handleBack">&#xe65e;</span>
    管理收货地址
    <span class="header__new" @click="handleNew">新建</span>
  </header>
  <div class="wrapper">
    <h3 class="tittle">我的收货地址</h3>
    <ul>
      <li class="item" v-for="(item) in data.content" :key="item._id" @click="handleChange(item._id)">
        <div class="item__left">
          <p class="item__left__top">
            <span class="name">{{ item.name }}</span>
            <span class="phone">{{ item.phone }}</span>
          </p>
          <p class="item__left__bottom">
            {{ item.department }} {{ item.houseNumber }}
          </p>
        </div>
        <div class="item__right iconfont">&#xe65e;</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { get } from "../../utils/post";
import {useStore} from 'vuex';

const useData = () => {
  const router = useRouter();
  // 设置响应式数据data接收返回的地址信息
  const data = reactive({ content: [] });
  const store=useStore();
  // 设置getData方法接收地址信息
  const getData = async () => {
    const result = await get("api/user/address");
    if (result?.errno === 0 && result?.data) {
      console.log(result.data);
      data.content = result.data;
      const newAddress=result.data
      // 执行store中的getAddress方法
      store.commit('getAddress',{newAddress})
    }
  };
  // 点击“返回”按钮退回上一页
  const handleBack = () => {
    router.back();
  };
  // 点击“新建”进入“新建地址”页面
  const handleNew = () => {
    router.push({ name: "NewAddress" });
  };
  // 点击收货地址信息跳转到“编辑收货地址”页面。
  const handleChange=(index)=>{
    router.push({path:`/changeaddress/${index}`})
  }
  return { getData, data, handleBack, handleNew,handleChange };
};
export default {
  name: "MyAddress",
  setup() {
    const { getData, data, handleBack, handleNew,handleChange } = useData();
    onMounted(getData());
    return {
      data,
      handleBack,
      handleNew,
      handleChange,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
p,
h3,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
header {
  height: 0.44rem;
  text-align: center;
  line-height: 0.44rem;
  font-size: 0.16rem;
  color: $content-fontcolor;
  position: relative;
  .header__icon {
    position: absolute;
    left: 0.18rem;
  }
  .header__new {
    position: absolute;
    right: 0.18rem;
    font-size: 0.14rem;
  }
}
.wrapper {
  position: absolute;
  top: 0.44rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $content-bgcolor;
  padding: 0.16rem 0.18rem 0;
  .tittle {
    height: 0.2rem;
    line-height: 0.2rem;
    font-size: 0.14rem;
    color: $content-fontcolor;
    margin-bottom: 0.12rem;
    font-weight: normal;
  }
  .item {
    padding: 0.16rem;
    background-color: #fff;
    border-radius: 0.04rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.16rem;
    &__right {
      height: 0.2rem;
      width: 0.4rem;
      line-height: 0.2rem;
      font-size: 0.16rem;
      transform: rotate(180deg);
      text-align: left;
    }
    &__left {
      flex: 1;
      line-height: 0.2rem;
      &__top {
        height: 0.2rem;
        color: $content-inputcolor;
        margin-bottom: 0.08rem;
        .name {
          margin-right: 0.66rem;
        }
      }
      &__bottom {
        font-size: 0.14rem;
        color: $content-fontcolor;
      }
    }
  }
}
</style>